<template>
<div class="gradeTable">
  <el-table v-loading="loading" :data="tableData" style="width: 100%" >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="主讲:">
            <span>{{ props.row.lecture.lecAuthor }}</span>
          </el-form-item>
          <el-form-item label="时长:">
            <span>{{ props.row.lecture.lecHour }}小时</span>
          </el-form-item>
          <el-form-item label="详情介绍:">
            <span>{{ props.row.lecture.lecDetail }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="编号" prop="tickId">
    </el-table-column>
    <el-table-column label="标题" prop="lecture.lecName" align="center">
    </el-table-column>
    <el-table-column label="时间" prop="tickDate" :formatter="dateFormat" align="center">
    </el-table-column>
    <el-table-column label="地点" prop="tickAddress" align="center">
    </el-table-column>
    <el-table-column sortable label="票目" prop="tickNum" width="100" align="center">
    </el-table-column>
    <el-table-column fixed="right" label="操 作" width="120">
      <template slot-scope="scope">
        <el-popover ref="popover{{$index}}" class="aew" placement="top" >
          <p>申请讲座 {{ scope.row.name }} ？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="cancel(scope.$index, tableData)">取消</el-button>
            <el-button type="primary" size="mini" @click="deleteRow(scope.$index, tableData)">确定</el-button>
          </div>
        </el-popover>
        <el-button type="text" size="small" v-popover:popover{{$index}}> 申请票目</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pager">
    <el-pagination layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange">
    </el-pagination>      
  </div>
</div>
</template>

<script type="text/ecmascript-6">
import {mapGetters, mapMutations} from 'vuex'
  export default {
    data() {
      return {
        loading: true,
        tableData: [],
        page: 1,
        currentPage: 1,
        totalCount: 0
      }
    },
    created(){
      this.getData(this.$route.params.id,this.page)
      setTimeout(() => {
        this.loading = false
      },1000)
    },
    methods: {
      handleCurrentChange(val) {
        this.getData(val)
      },
      deleteRow(index, rows) {
        var _this=this
        this.$ajax.post('/api/addTicketList',rows[index]).then(function(response){
          if(0==response.data.code){
              setTimeout(function () {
                _this.$message({message: response.data.data, type: 'success'});
              }, 500);
          }else if(1==response.data.code){
              _this.$message({message: response.data.msg, type: 'error'});
          }
        }).catch(function(error){console.log(error);}); 
        rows.splice(index, 1);
        document.querySelector("#app").click();
      },
      cancel(index, rows){
        document.querySelector("#app").click();
      },
      getData(id,page){
        var _this=this
        this.$ajax.get('/api/getTicketsBy?page='+(page-1)+'&id='+id).then(function(response){
          _this.tableData = response.data.data.content
          _this.totalCount = response.data.data.totalElements
        }).catch(function(error){console.log(error);}); 
      },
      dateFormat(row, column) {  
        return new Date(row[column.property]).toLocaleString()
      }, 
      ...mapMutations({
        setIsShow: 'SET_ISSHOW'
      }),
    },
  }
</script>

<style scoped>
.pager{margin-top:35px;text-align:center;}
.gradeTable{
  position: absolute;
  width: 97%;
  height: 50%;
  top: 20px;
  background-color: #fff;
}
</style>